<template>
  <div class="companyMain" ref="scrollTopList">
    <div id="container">
      <ul class="hc_list reset" v-if="companyList.length">
        <!-- :key=company.company_id -->
        <li
          v-for="(company,index) in companyList"
          :key="company.company_id"
          @click="navigateCompanyItem(company.company_id)"
        >
          <a>
            <h3>{{company.title}}</h3>
            <div class="comLogo">
              <img
                :src="company.image_url != '' ? company.image_url : 'https://job-saas.oss-cn-hangzhou.aliyuncs.com/poster-background/default_image_url.jpg'"
                width="190"
                height="190"
                alt="CCIC"
              />
              <ul>
                <li>{{company.onlineJob}}个在招职位</li>
              </ul>
            </div>
          </a>
          <!-- <div v-if="company.job_list.length">
            <a
              v-for="(item,index) in company.job_list"
              @click="navigateJobItem(item.job_id)"
              :key="item.job_id"
            >{{item.job_title != '' ? item.job_title : item.position_title }}</a>
          </div>-->
        </li>
      </ul>
      <Empty v-if="companyList.length == 0" content="暂无公司信息~"></Empty>
      <el-pagination
        v-if="companyList.length && pageTotal > pageSize"
        background
        layout="prev, pager, next"
        :total="pageTotal"
        :page-size="pageSize"
        @current-change="changePage"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { CompanyListReq } from "~/api/worker/company.js";
import Empty from "~/components/empty/empty";
// import { getSalaryUnit, getJobTag } from "~/common/js/util.js";

export default {
  name: "companyMain",
  data() {
    return {
      hasMore: true,
      requestLock: false,
      companyList: {},
      page: 0,
      pageTotal: 0,
      pageSize: 12
    };
  },
  components: { Empty },
  created() {
    this.$store.dispatch("changeTabName", "companyMain");
  },
  mounted() {
    this.getCompanyList();
  },
  methods: {
    async getCompanyList() {
      let currentPage = this.page;
      //获取企业列表
      let companyListResult = await CompanyListReq({
        page: ++currentPage,
        pageNum: this.pageSize
      }).catch(err => {
        Message.error("系统错误，请联系技术人员。" + err);
      });

      let { companyList, page } = companyListResult;
      this.companyList = companyList;
      this.pageTotal = page.pageTotal * page.pageNum;
      this.page = page.page;
    },
    changePage(e) {
      this.page = e - 1;
      this.getCompanyList();
    },
    navigateJobItem(jobId) {
      this.$router.push({
        name: "positionDetail",
        query: { job_id: jobId }
      });
    },
    navigateCompanyItem(companyId) {
      // console.log(companyId)
      this.$router.push({
        name: "companyDetail",
        query: { company_id: companyId }
      });
    }
  }
};
</script>

<style scoped lang="less">
// @import "./../../../public/less/main.less";
@import "./../../../public/less/company_main.less";

.companyMain {
  display: flex;
  width: 100%;
  justify-content: center;
  min-height: 63vh;
  // overflow: scroll;
  // height: calc(100vh - 76px);
}
</style>
